<template>
  <div class="container h-p100">
    <div v-if="list && list.length === 0" class="no-data">
      <img class="icon-no-jiekuan" :src="require('../assets/images/icon-no-jiekuan.png')" alt="">
      <div class="tc-999 tx-c">暂无符合条件的借款单</div>
      <div @click="jiekuan()" class="btn-new">新建借款单单</div>
    </div>
    <div v-if="list && list.length > 0" class="box box-ver h-p100">
      <div class="box-f1 of-y-s content">
        <div @click="checkItem(index)" v-for="(item, index) in list" :value="item" :key="index" class="item box">
          <div class="checkbox box box-ac">
            <div :class="{'act': item.checked}" class="icon icon-checkbox"></div>
          </div>
          <div class="item-content">
            <div class="num box box-ac card-linear1">
              {{item.num}}
            </div>
            <div class="box amount">
              <div class="box-f1 box-fh">
                <div class="tit">未归还金额：</div>
                <div class="tc-main">{{item.amountBalance}}</div>
              </div>
              <div class="box-f1 box-fh">
                <div  class="tit">借款金额：</div>
                <div>{{item.amount}}</div>
              </div>
            </div>
            <div class="box date">
              <div class="box-f1 box-fh">
                <div class="tit">借款日期：</div>
                <div class="">{{item.billDate.split(' ')[0]}}</div>
              </div>
              <div class="box-f1 box-fh">
                <div  class="tit">承诺还款日期：</div>
                <div>{{item.forReseeDate}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="next()" class="btn-bot">第二步 填写还款金额及说明</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { formatDate } from '@/assets/js/filters'
import { getAddDate } from '@/assets/js/common'

export default {
  name: 'huankuanStep1',
  data () {
    return {
      list: null
    }
  },
  computed: {
    ...mapState(['userNum', 'userInfo', 'bizAccountBill'])
  },
  mounted () {
    this.getDailyLoanBills()
  },
  methods: {
    checkItem (index) {
      this.list.forEach(item => {
        item.checked = false
      })
      this.list[index].checked = !this.list[index].checked
      this.$store.commit('bizAccountBill', {
        dailyLoanNum: this.list[index].num,
        amountBalance: this.list[index].amountBalance
      })
      // this.$forceUpdate()
      // console.log(this.list[index].checked)
      // let marchInfos = []
      // this.travelList.forEach(item => {
      //   if (item.checked) marchInfos.push(item)
      // })
      // this.bizAccountBill.marchInfos = marchInfos
    },
    jiekuan () {
      this.$store.commit('resetBizAccountBill')
      let loanDate = formatDate(new Date(), 'yyyy-MM-dd')
      this.$store.commit('bizAccountBill', {
        loanDate,
        returnDate: getAddDate(loanDate, 30),
        expenseName: '请选择',
        dailyLoanNum: '',
        relateBillNumber: '',
        companyName: this.userInfo.companyName,
        companyNum: this.userInfo.companyNum,
        costCenterName: this.userInfo.depName,
        costDeptNum: this.userInfo.depNum
      })
      this.$router.replace('/jiekuanStep1')
    },
    // 获取我的借款单（未还款金额）
    getDailyLoanBills () {
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getDailyLoanBills',
          userNum: this.userNum,
          state: `[45,70]`,
          bizDate: JSON.stringify(['2010-01-01', '2030-01-01'])
        }
      }).then(res => {
        if (res.code === 200) {
          let list = []
          let dailyLoanNum = this.bizAccountBill.dailyLoanNum
          res.t.forEach(item => {
            item.checked = false
            if (item.num === dailyLoanNum) item.checked = true
            if (+item.amountBalance > 0) list.push(item)
          })
          this.list = list
        }
      })
    },
    next () {
      if (!this.bizAccountBill.dailyLoanNum) {
        return this.$tools.openToast({
          msg: '请先选择借款单',
          duration: 3000
        })
      }
      let repayDate = formatDate(new Date(), 'yyyy-MM-dd')
      this.$store.commit('bizAccountBill', {
        repayDate,
        repaymentBillNum: ''
      })
      this.$router.push({
        path: '/huankuanStep2'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.container{
  // background-color:#FFF;
}
.content{
  padding-top:.3rem;
  padding-bottom:.2rem;
}
.icon-no-jiekuan{
  display:block;
  margin:0 auto;
  margin-top:1.4rem;
  margin-bottom:.4rem;
  width:1.7rem;
}
.btn-new{
  width:3.7rem;
  height:.9rem;
  font-size:.34rem;
  line-height:.9rem;
  text-align:center;
  background-color:$themeColor;
  color:#FFF;
  margin:1.4rem auto;
  border-radius:.1rem;
}
.item{
  padding:.15rem .3rem;
  .checkbox{
    width:1.1rem;
  }
  .item-content{
    background-color:#FFF;
    font-size:.26rem;
    margin-bottom:.25rem;
    color:#333;
    border-radius:.2rem;
    overflow: hidden;
    width:6.2rem;
    .num{
      color:#FFF;
      padding:.2rem .3rem;
      font-size:.36rem;
    }
    .amount,.date{
      margin:0 .3rem;
      padding: .2rem 0;
      border-bottom:1px solid $borderColor;
      .tit{
        padding-bottom:.2rem;
      }
    }
  }
}
.btn-bot{
  @include btn(100%, 1rem, .36rem);
}
</style>
